<template>
    <button id="shareButton">分享</button>
</template>

<script>
import wx from "weixin-js-sdk";
import axios from "axios";
export default {
    data() {
        return {
            appId: 'wx89289c3a3da01e68', //微信公众号唯一标识，在微信公众号后台获取
            title: '测试分享卡片',  //分享内容的标题
            desc: '描述描述描述呀呀呀呀呀呀', // 分享内容的简短描述
            link: 'https://www.ainaoxingdong.com/braintest/index.html',
            imgUrl: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF' //必须是绝对路径
        }
    },
    created() {

    },
    mounted() {
        // this.handleShare()
        this.shareMes()
        // window.onload = function () {
        //     // 初始化微信分享设置
        //     wx.config({
        //         // 配置参数
        //         debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        //         appId: 'wx89289c3a3da01e68', // 必填，公众号的唯一标识
        //         timestamp: "1691394429", // 必填，生成签名的时间戳
        //         nonceStr: "C9A94DDF6F42428", // 必填，生成签名的随机串
        //         signature: "8d5d8251ac03e91bc938ee5b4fa80edfadf9317f", // 必填，签名
        //         jsApiList: [
        //             'onMenuShareTimeline', 'onMenuShareAppMessage', 'updateAppMessageShareData', 'updateTimelineShareData'
        //         ]
        //     });

        // }
        // wx.ready(() => {
        //     //配置分享数据
        //     let shareData = {
        //         title: '卡号晶方科技后端接口很好看接电话',  //分享的标题
        //         desc: '接看看扩扩扩扩扩扩扩扩扩军扩',  //分享的描述
        //         link: 'https://www.ainaoxingdong.com/brain/index.html#/login',   //分享的链接
        //         imgUrl: "https://image.baidu.com/search/detail?tn=baiduimagedetail&word=%E5%9F%8E%E5%B8%82%E5%BB%BA%E7%AD%91%E6%91%84%E5%BD%B1%E4%B8%93%E9%A2%98&album_tab=%E5%BB%BA%E7%AD%91&album_id=7&ie=utf-8&fr=albumsdetail&cs=1595072465,3644073269&pi=3977&pn=0&ic=0&objurl=https%3A%2F%2Ft7.baidu.com%2Fit%2Fu%3D1595072465%2C3644073269%26fm%3D193%26f%3DGIF", //分享的图片链接
        //         success(response) {
        //             //配置成功之后的回调（并不是分享成功之后的回调，这个地方是个坑，要注意下）

        //         },
        //     };

        //     wx.updateAppMessageShareData(shareData)
        //     wx.onMenuShareAppMessage(shareData)
        //     wx.updateTimelineShareData(shareData)
        //     wx.onMenuShareTimeline(shareData)
        // })
    },

    methods: {
        shareMes() {
            wx.config({
                // 配置参数
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: 'wx89289c3a3da01e68', // 必填，公众号的唯一标识
                timestamp: "1691473937", // 必填，生成签名的时间戳
                nonceStr: "3E230ED249D5476", // 必填，生成签名的随机串
                signature: "b1d1b3147d6e8837309246f7bf20dba04d3525a1", // 必填，签名
                jsApiList: [
                    'checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'updateAppMessageShareData', 'updateTimelineShareData'
                ]
            });
            wx.checkJsApi({
                jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'updateAppMessageShareData', 'updateTimelineShareData'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
                success: function (res) {
                    // 以键值对的形式返回，可用的api值true，不可用为false
                    // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                    console.log(res, 'checkJsApi')
                }
            });
            this.wxShare();
            console.log('hihihi');
        },
        wxShare() {
            //通过ready接口处理成功验证 ,通过error接口处理失败验证
            // wx.ready(() => {
            //     wx.onMenuShareAppMessage({ //需在用户可能点击分享按钮前就先调用
            //         title: this.title, // 分享标题
            //         desc: this.desc, // 分享描述
            //         link: this.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            //         imgUrl: this.imgUrl, // 分享图标
            //         success: function () {
            //             // 设置成功
            //             console.log("分享好友设置成功");
            //         }
            //     })
            //     //分享朋友圈
            //     wx.onMenuShareTimeline({  //需在用户可能点击分享按钮前就先调用
            //         title: this.title, // 分享标题
            //         link: this.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            //         imgUrl: this.imgUrl, // 分享图标
            //         success: function () {
            //             console.log('分享朋友圈设置成功');
            //             // 设置成功
            //         }
            //     })
            // })
            wx.ready(() => {
                wx.updateAppMessageShareData({
                    title: this.title, // 分享标题
                    desc: this.desc,// 分享描述
                    link: this.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: this.imgUrl, // 分享图标
                    success: function () {
                        // 用户确认分享后执行的回调函数
                    }
                });
                wx.updateTimelineShareData({
                    title: this.title, // 分享标题
                    desc: this.desc, // 分享描述
                    link: this.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: this.imgUrl, // 分享图标
                    success: function () {
                        // 用户确认分享后执行的回调函数
                    }
                });
            });
            wx.error(function (res) {
                console.log('生成微信签名失败了');
                // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            })
        }

    },
    // methods: {
    //     handleShare() {
    //         wx.config({
    //             debug: false,// 是否开启调试模式
    //             appId: 'wx89289c3a3da01e68',//appid
    //             timestamp: '1691473937',// 时间戳
    //             nonceStr: '3E230ED249D5476',// 随机字符串
    //             signature: 'b1d1b3147d6e8837309246f7bf20dba04d3525a1',// 签名
    //             jsApiList: [
    //                 'checkJsApi',
    //                 'onMenuShareTimeline',
    //                 'onMenuShareAppMessage',
    //                 'onMenuShareQQ',
    //                 'onMenuShareQZone',
    //                 'updateAppMessageShareData', 'updateTimelineShareData'
    //             ]// 需要使用的JS接口列表
    //         })

    //         let shareData = {
    //             title: 'hello', // 分享标题
    //             desc: '这是自定义的分享的描述', // 分享描述
    //             link: 'https://www.ainaoxingdong.com/braintest/index.html', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    //             imgUrl: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF', // 分享图标
    //             success: function () { },//分享成功的回调函数
    //             cancel: function () { }//分享失败的回调函数
    //         }

    //         //所有接口调用都必须在config接口获得结果之后。
    //         //config信息验证后会执行ready方法。
    //         //config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
    //         wx.ready(function () {
    //             wx.onMenuShareAppMessage(shareData); // 微信好友
    //             wx.onMenuShareTimeline(shareData); // 微信朋友圈
    //             wx.updateAppMessageShareData(shareData); // QQ
    //             wx.updateTimelineShareData(shareData) // QQ空间
    //         });
    //         wx.error(function (res) {
    //             console.log('失败', res);
    //         })

    //     }
    // },

}
</script>